<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" title="基本信息" width="600px" @open="openDialog" @close="closeDialog">
    <div class="equip-dialog-content">
      <div class="equip-dialog-wrap-item">
        <div class="label">备件类型编码：</div>
        <div class="text">{{ formValue.code }}</div>
      </div>
      <div class="equip-dialog-wrap-item">
        <div class="label">备件类型:</div>
        <div class="text">{{ formValue.type }}</div>
      </div>
      <div class="equip-dialog-wrap-item">
        <div class="label">备件分类：</div>
        <div class="text">{{ formValue.categoryDesc }}</div>
      </div>
      <div class="equip-dialog-wrap-item">
        <div class="label">厂内型号:</div>
        <div class="text">{{ formValue.model }}</div>
      </div>
      <div class="equip-dialog-wrap-item">
        <div class="label">备注：</div>
        <div class="text">{{ formValue.remark }}</div>
      </div>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { reactive, toRefs, computed } from "vue";

// 调用父级-关闭弹窗
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["visible", "sparePartsRow"]);
const visible = computed(() => props.visible);
// 页面本身的值
const state = reactive<any>({
  formValue: {
    code: "",
    categoryDesc: "",
    type: "",
    model: "",
    remark: ""
  }
});
const { formValue } = toRefs(state);
// 打开弹窗
const openDialog = () => {
  formValue.value = props.sparePartsRow;
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};
</script>
<style lang="scss" scoped>
.equip-dialog-wrap {
  .equip-dialog-content {
    .equip-dialog-wrap-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #000;

      .label {
        width: 20%;
        height: 36px;
        line-height: 36px;
      }

      .text {
        width: 80%;
        text-align: right;
        word-break: break-all;
      }
    }
  }
}
</style>
